<template>
	<view class="aptartment-detail">
		<CustomNav :nav-info="navInfo" />
		<view class="aptartment-detail-top">
			<view class="aptartment-detail-banner">
				<image style="width:100%" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/apartment/banner.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="aptartment-detail-info1">
			<view class="header">
				<view class="title">
					尔家公寓(广益食科园店)
				</view>
			</view>
			<view class="mt-20 border-bottom">
				<uni-tag custom-style="background-color: #F6F7F9; border-color: #F6F7F9; color: #666768;" text="安全监控" />
				<uni-tag style="margin-left: 12rpx;" custom-style="background-color: #F6F7F9; border-color: #F6F7F9; color: #666768;" text="便利店" />
				<uni-tag style="margin-left: 12rpx;" custom-style="background-color: #F6F7F9; border-color: #F6F7F9; color: #666768;" text="带楼梯" />
			</view>
			<view class="address mt-20">
				<text class="text-color mr-10">公寓地址</text> 无锡市梁溪区
			</view>
			<view class="flex-between mt-20">
				<view class="address">
					<text class="text-color mr-10">公寓管理</text> 崇安寺国际人才社区
				</view>
				<view class="price">
					2400.00元/月起
				</view>
			</view>
		</view>
		<view class="aptartment-detail-info2">
			<view class="title">
				基本信息
			</view>
			<view class="mt-20">
				<uni-row :gutter="8">
					<uni-col :span="24">
						<text class="filed-label">公寓名称</text>
						<text class="filed-value">梁溪·崇安寺国际人才社区</text>
					</uni-col>
				</uni-row>
			</view>
			<view class="mt-20">
				<uni-row :gutter="8">
					<uni-col :span="24">
						<text class="filed-label">公寓地址</text>
						<text class="filed-value">无锡市梁溪区</text>
					</uni-col>
				</uni-row>
			</view>
			<view class="mt-20">
				<uni-row :gutter="8">
					<uni-col :span="12">
						<text class="filed-label">建成年代</text>
						<text class="filed-value">2017年建成</text>
					</uni-col>
					<uni-col :span="12">
						<text class="filed-label">建成类型</text>
						<text class="filed-value">商住房</text>
					</uni-col>
				</uni-row>
			</view>
			<view class="mt-20">
				<uni-row :gutter="8">
					<uni-col :span="24">
						<text class="filed-label">交易权属</text>
						<text class="filed-value">2017年</text>
					</uni-col>
				</uni-row>
			</view>
			<view class="mt-20">
				<uni-row :gutter="8">
					<uni-col :span="24">
						<text class="filed-label">开发企业</text>
						<text class="filed-value">无锡首合安逸物业管理有限公司</text>
					</uni-col>
				</uni-row>
			</view>
			<view class="mt-20">
				<uni-row :gutter="8">
					<uni-col :span="12">
						<text class="filed-label">固定车位</text>
						<text class="filed-value">35个</text>
					</uni-col>
					<uni-col :span="12">
						<text class="filed-label">停车费用</text>
						<text class="filed-value">400元</text>
					</uni-col>
				</uni-row>
			</view>
			<view class="mt-20">
				<uni-row :gutter="8">
					<uni-col :span="12">
						<text class="filed-label">燃气费用</text>
						<text class="filed-value">3元/立方</text>
					</uni-col>
					<uni-col :span="12">
						<text class="filed-label">绿化率</text>
						<text class="filed-value">30%</text>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view class="ds-card mlr mt-20">
			<view class="header">
				<text class="title">户型介绍</text>
				<text class="action">查看更多 ></text>
			</view>
			<view>
				<scroll-view class="house-type mt-20" :scroll-x="true" >
					<view class="house">
						<image style="width:150px;" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/apartment/banner.png" mode="widthFix"></image>
						<view class="">
							A户型
						</view>
					</view>
					<view class="house ml-10">
						<image style="width:150px;" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/apartment/banner.png" mode="widthFix"></image>
						<view class="">
							B户型
						</view>
					</view>
					<view class="house ml-10">
						<image style="width:150px;" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/apartment/banner.png" mode="widthFix"></image>
						<view class="">
							C户型
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="ds-card mlr mt-20">
			<view class="header">
				<text class="title">位置及周边</text>
			</view>
			<map style="width: 100%; height: 150px;margin-top: 10px" :latitude="latitude" :longitude="longitude" :markers="covers" />
		</view>
	</view>
</template>

<script>
	import CustomNav from '../../components/CustomNav/index.vue'
	export default {
		components: {
			CustomNav
		},
		data() {
			return {
				navInfo: {
					bg_color: 'transparent',
					color: "#fff",
					name: '公寓详情'
				},
				latitude: 31.491064,
				longitude: 120.311889,
				covers: []
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.aptartment-detail {
	min-height: 100vh;
	background-color: #F4F6F8;
	.mlr {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	&-info1 {
		margin-top: -100rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		// z-index: 100;
		.header {
			display: flex;
			justify-content: space-between;
		}
		.title {
			font-size: 40rpx;
			font-weight: 600;
			color: #292F38;
			line-height: 32rpx;
		}
		.price {
			font-size: 35rpx;
			font-weight: 500;
			color: #0051FF;
			line-height: 33rpx;
		}
		.date {
			font-size: 24rpx;
			font-weight: 400;
			color: #767B84;
			line-height: 33rpx;
		}
		.address {
			font-size: 24rpx;
			font-weight: 400;
			color: #000000;
			line-height: 33rpx;
		}
	}
	&-info2 {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #211D1D;
			line-height: 50rpx;
		}
		.content {
			margin-top: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #211D1D;
		}
	}
	.house-type {
		width: 100%;
		white-space: nowrap;
		.house {
			// padding: 25rpx;
			// border: 1px solid #E1E1E1;
			display: inline-block;
		}
	}
}
</style>
